<template>
<div class="apply">
  <div class="common-list">
    <table class="temp-table">
      <thead>
      <tr>
        <th style="width: 200px">审批主题</th>
        <th style="width: 200px">邮件主题</th>
        <th style="width: 100px">提交人</th>
        <th style="width: 120px">提交日期</th>
        <th style="width: 140px">操作</th>
      </tr>
      </thead>
      <tbody :style="{minHeight:HEIGHT-239+'px'}">
      <div v-for="item,index in list" :key="index">
        <tr>
          <td class="more" style="width: 200px;color: #2A97F9;cursor: pointer" title="查看审批详情" @click="editCheck(item.id)">
            {{item.approvalSubject}}
          </td>
          <td style="width: 200px" class="more">{{item.emailSubject}}</td>
          <td style="width: 100px" class="more">{{item.submitUserName}}</td>
          <td style="width: 120px">{{item.createTime}}</td>
          <td style="width: 140px">
            <el-link type="primary"  @click="dealCheck(item,2)">审核通过</el-link>
            <el-link type="primary" @click="dealCheck(item,3)">审核不通过</el-link>
          </td>
        </tr>
      </div>
      <tr class="empty-img" v-show="isEnd" style="background-color: #fff;border-bottom: 0">
        <td colspan="8" style="background-color: #fff;padding: 70px 0;">
          <img src="../../../../../../public/img/empty.png" alt="" style="width: 300px">
        </td>
      </tr>
      </tbody>
    </table>
    <el-pagination class="fixed"
                   background align="right"
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
                   :current-page="nowPage"
                   :page-size="nowSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</div>
</template>

<script>
    import {mapState} from 'vuex'
    import {getApprovalList, dealCheck} from '@/api/approval'
    export default {
        name: "index",
        data() {
            return {
                list: [],
                nowPage: 1,
                nowSize: 20,
                total: 0,
                isEnd: false,
                HEIGHT: document.documentElement.clientHeight,
            }
        },
        computed: {
            ...mapState(['common'])
        },
        created() {
            this.nowPage = this.common.commonPage;
            this.nowSize = this.common.commonPageSize;
        },
        mounted() {
            this.getList()
        },
        methods:{
            getList() {
                const params = {
                    searchType: 1,//（0-我提交的审批，1-由我审批）
                    statusType:0,//由我审批状态（0-待审批，1-已审批）
                    current: this.nowPage,
                    size: this.nowSize
                }
                getApprovalList(params).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        console.log(result)
                        this.total = result.total;
                        this.isEnd = this.total == 0;
                        this.list = result.records;
                    }
                }).catch(err => {
                    console.log(err)
                })

            },
            dealCheck(row,status) {
                if (status == 2) {//直接通过 - 确认框
                    this.$confirm(' <div style="margin: 20px 10px;">\n' +
                        '        <p style="line-height: 30px;\n' +
                        '        font-size: 14px;">审核通过主题为 <span class="more" style="color:#2A97F9">"' + row.approvalSubject + '"</span> 的审批单吗?</p></div>',
                        '处理审批单', {
                            dangerouslyUseHTMLString: true,
                            confirmButtonText: '确 认',
                            cancelButtonText: '取 消'
                        }).then(() => {
                        this.submit(row,status,'');
                    }).catch(() => {
                    })
                } else {//不通过 - 输入框
                    this.$prompt('填写不通过原因', '处理审批单', {
                        confirmButtonText: '确 认',
                        cancelButtonText: '取 消',
                    }).then(({ value }) => {
                        this.submit(row,status,value);
                    }).catch(() => {
                    });
                }
            },
            submit(row,status,value) {
                const params = {
                    id: row.id,
                    emailInfoId: row.emailInfoId,
                    status: status,
                    noPassCause: value,//不通过原因
                }
                dealCheck(params).then(res => {
                    this.dealResult(res);
                }).catch(err => {
                    console.log(err)
                })
            },
            dealResult(res) {//重置
                if (res.data.success) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.handleCurrentChange(1)
                } else {
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                }
            },
            editCheck(id) {
                //判断类型
                this.$store.commit('SET_EMAILPAGE', this.nowPage)
                this.$store.commit('SET_EMAILPAGESIZE', this.nowSize)
                this.$router.push({
                    path: '/mail/approval/exam/detail',
                    query: {
                        id: id
                    }
                })
            },
            handleSizeChange(size) { //  条数发生改变
                this.nowSize = size
                this.$store.commit('SET_COMMONPAGE', {page: this.nowPage, pageSize: this.nowSize});
                this.getList()
            },
            handleCurrentChange(page) { //页数发生变化
                this.nowPage = page
                this.$store.commit('SET_COMMONPAGE', {page: this.nowPage, pageSize: this.nowSize});
                this.getList()
            },
        }
    }
</script>

<style scoped>

</style>
